<script setup name="child">
import { ref, defineExpose } from 'vue';

const color = ref('red');
defineExpose({
  getData() {
    return color.value;
  },
  changeColor() {
    color.value = color.value === 'red' ? 'green' : 'red';
  },
});
</script>

<template>
  <button>
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>
